AMP Ads এর জন্য Responsive Layout তৈরি করতে, আপনাকে AMP HTML কম্পোনেন্ট ব্যবহার করতে হবে যা মোবাইল এবং ডেস্কটপ ডিভাইসে সঠিকভাবে বিজ্ঞাপন প্রদর্শন করে। AMP Ads-এর জন্য responsive layout তৈরি করার সময় কিছু গুরুত্বপূর্ণ বিষয় মাথায় রাখতে হবে যাতে বিজ্ঞাপন সঠিকভাবে বিভিন্ন স্ক্রীনে এবং ডিভাইসে প্রদর্শিত হয়।
এখানে, AMP Ads এর জন্য একটি responsive layout তৈরি করার পদক্ষেপ দেওয়া হল:
1. AMP Ads কম্পোনেন্ট ব্যবহার করা
প্রথমে, আপনাকে AMP Ads-এর জন্য <amp-ad> ট্যাগ ব্যবহার করতে হবে। এটি AMP পেজে বিজ্ঞাপন সংযোজনের জন্য ব্যবহৃত হয়। AMP Ads গুগল ডাব্লুএনএ (AdSense) বা অন্য বিজ্ঞাপন সিস্টেমের সাথে কাজ করে।
2. Responsive Layout এর জন্য কোড
নিচে একটি উদাহরণ দেওয়া হলো যেখানে আমরা AMP Ads-এর জন্য একটি responsive layout তৈরি করছি:
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive AMP Ads</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<style amp-custom>
body {
font-family: Roboto, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: auto;
padding: 20px;
}
h1 {
text-align: center;
}
/* Responsive ads container */
.ad-container {
position: relative;
width: 100%;
max-width: 600px;
margin: 20px auto;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
amp-ad {
width: 100%;
height: 200px;
}
@media (max-width: 768px) {
.ad-container {
max-width: 100%;
}
amp-ad {
height: 180px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive AMP Ads Example</h1>
<!-- AMP Ad Unit -->
<div class="ad-container">
<amp-ad
type="adsense"
width="300"
height="250"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890">
</amp-ad>
</div>
<div class="ad-container">
<amp-ad
type="adsense"
width="320"
height="100"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890">
</amp-ad>
</div>
<!-- Another Ad Unit Example -->
<div class="ad-container">
<amp-ad
type="adsense"
width="728"
height="90"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890">
</amp-ad>
</div>
</div>
</body>
</html>3. ব্যাখ্যা:
<amp-ad>ট্যাগ:<amp-ad>ট্যাগ ব্যবহার করে গুগল অ্যাডসেন্স বা অন্য কোনও বিজ্ঞাপন পরিষেবা থেকে বিজ্ঞাপন রেন্ডার করা হয়। এখানেtype="adsense"উল্লেখ করা হয়েছে, তবে আপনি অন্য ধরনের বিজ্ঞাপন পরিষেবাও ব্যবহার করতে পারেন।data-ad-clientএবংdata-ad-slotএর মাধ্যমে বিজ্ঞাপন ক্লায়েন্ট এবং অ্যাড স্লটের আইডি সেট করা হয়।
- CSS-এ Responsive Layout:
.ad-containerক্লাসের মধ্যে বিজ্ঞাপনটির জন্য একটি কনটেইনার তৈরি করা হয়েছে, যেখানেwidth: 100%দিয়ে এটি স্ক্রীনের আকার অনুযায়ী পরিবর্তিত হয়।- মিডিয়া কুয়েরি ব্যবহার করে আমরা
.ad-containerএবংamp-adট্যাগের সাইজ কম্পিউটার এবং মোবাইল ডিভাইসের জন্য কাস্টমাইজ করেছি। যেমন, মোবাইল স্ক্রীনে বিজ্ঞাপনটি একটু ছোট করা হয়েছে এবং সম্পূর্ণ প্রস্থে প্রদর্শিত হয়।
widthএবংheight:- প্রতিটি
<amp-ad>ট্যাগেwidthএবংheightদেওয়া হয় যাতে অ্যাড ইউনিটটি সঠিকভাবে রেন্ডার হয়। রেসপন্সিভ হওয়ার জন্য CSS-এmax-widthএবংwidth: 100%ব্যবহার করা হয়েছে যাতে এটি সমস্ত ডিভাইসে স্কেল করতে পারে।
- প্রতিটি
- মোবাইল-ফ্রেন্ডলি ডিজাইন:
@media (max-width: 768px)মিডিয়া কুয়েরি ব্যবহার করে আমরা মোবাইল ডিভাইসে বিজ্ঞাপনের সাইজ এবং লেআউট সামঞ্জস্য করছি। এটি বিজ্ঞাপন ইউনিটগুলোকে ছোট স্ক্রীনে সুন্দরভাবে প্রদর্শিত হতে সহায়তা করে।
4. Responsive AMP Ads এর উপকারিতা
- মোবাইল ডিভাইসের জন্য অপ্টিমাইজড: AMP Ads মোবাইল ব্যবহারকারীদের জন্য দ্রুত লোড হয় এবং স্ক্রীন সাইজ অনুযায়ী সঠিকভাবে প্রদর্শিত হয়।
- দ্রুত লোডিং: AMP পেজের মাধ্যমে বিজ্ঞাপন দ্রুত লোড হয়, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
- বিভিন্ন স্ক্রীনে সঠিক প্রদর্শন: বিজ্ঞাপনটি বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত হয়, যা অধিক ট্যাপ এবং ক্লিক আনে।
5. অতিরিক্ত টিপস
- বিভিন্ন অ্যাড সাইজ: আপনি বিভিন্ন বিজ্ঞাপন সাইজ ব্যবহার করতে পারেন যেমন 300x250, 728x90, 320x100, ইত্যাদি। ডিজাইন এবং কন্টেন্টের সাথে ভালভাবে মেলে এমন সাইজ নির্বাচন করুন।
- এডভার্টাইজিং নেটওয়ার্ক: গুগল অ্যাডসেন্স ছাড়া, অন্যান্য বিজ্ঞাপন নেটওয়ার্কগুলোর জন্যও AMP Ads সমর্থন করে, তবে তাদের জন্য আলাদা কনফিগারেশন প্রয়োজন হতে পারে।
এভাবে, AMP Ads এর জন্য responsive layout তৈরি করলে, ওয়েবসাইটের বিজ্ঞাপন দ্রুত লোড হবে এবং ব্যবহারকারীদের জন্য একটি উন্নত অভিজ্ঞতা নিশ্চিত হবে।
Content added By
Read more
